<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");

    var deleteList = document.getElementsByClassName("delete"); 
    var deleteAll = document.getElementById("deleteAll"); 


    
    // 1. 全选功能  点击全选  所有的单选跟随全选的状态
    checkAll.onclick = function(){
        // console.log(this);
        var status = this.checked;   //获取全选框的状态
        console.log(status);
        for(var i=0;i<checkOneList.length;i++){
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }

    // 2. 反选功能  所有的单选被选中  => 全选框也被选中
    // 每次点击单选框 判断所有的单选 是否全都是选中状态

    for(let i=0;i<checkOneList.length;i++){  //循环绑定事件
        let checkOne = checkOneList[i];
        checkOne.onclick = function(){
            // 如何判断 所有的单选 是否全都是选中状态?

            // 1. 假设法
            var flag = true; // 假设全部被选中   => 找到一个未选中的即可推翻假设
            for(var j = 0; j<checkOneList.length;j++){
                var item = checkOneList[j];
                if(!item.checked){  //item.checked == false
                    flag = false;
                    break;
                }
            }
            console.log(flag);
            checkAll.checked = flag;

        }
    }


    // 点击加号
    // (1)加法要求 
    // 点击 “+”     输入框  数量 加一 
    //             小计更新  =  单价*数量
    //             减号按钮的 “-”  出现 
    for(let i = 0; i< addList.length; i++){3
        let add = addList[i];
        add.onclick = function(){
            // console.log(this,add);

            // a. 输入框  数量 加一
            // var countInp = this.previousElementSibling;
            var countInp = prev(this);  // this => 被点击的元素(加号)
            console.log(countInp);
            var num = countInp.value;  // 取值
            num++;  //自增
            countInp.value = num; //赋值(更新到页面)

            // b.小计更新  =  单价*数量
            // 数量  =>  num
            // 单价  =>  先找单价的元素
            var countTd = parent(this);
            var priceTd= prev(countTd);
            var subtotalTd = next(countTd);

            var price = priceTd.innerText*1;

            subtotalTd.innerText = (price*num).toFixed(2);

            // c. 减号按钮的 “-”  出现 
            var reduce = prev(countInp);
            console.log(reduce);
            reduce.textContent = "-";

        }
    }

    // 减号
    // 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
    //            小计更新  =  单价*数量
    //            减之前  判断  如果数量为1  不能减   
    //            减之后  判断  如果数量为1  减号按钮的 “-” 消失
    for(let i = 0;i< reduceList.length;i++){
        var reduce = reduceList[i];
        reduce.onclick = function(){
            // console.log(this,reduce);
            // a. 输入框  数量 减一   （细节要求  数量为1的时候  不再减）
            var countInp = next(this);
            var num = countInp.value;  // 取值

            // c. 减之前  判断  如果数量为1  不能减  
            if(num==1){
                return false; //  函数遇到return就停止了 后续的代码不在执行
            }
            num--;  //自减
            // d. 减之后  判断  如果数量为1  减号按钮的 “-” 消失  (2切换到1)
            if(num==1){
                this.textContent = "";
            }

            countInp.value = num; //赋值(更新到页面)

            // b.小计更新  =  单价*数量
            // 数量  =>  num
            // 单价  =>  先找单价的元素
            var countTd = parent(this);
            var priceTd= prev(countTd);
            var subtotalTd = next(countTd);

            var price = priceTd.innerText*1;

            subtotalTd.innerText = (price*num).toFixed(2);

        }
    }

    // 单删
    for(let i = 0;i < deleteList.length; i++){
        // delete是一个关键词  => 不能作为变量
        var del = deleteList[i];
        del.onclick = function(){
            console.log(this);
            if(confirm("是否删除该商品?")){
                var tr = parent(parent(this));
                tr.remove();
            }
        }
    }

    // 全删  => 选中删除(找到所有选中状态的单选框  删除该行数据)

    // checkOneList  => HTMLCollection =>  会随着页面查找元素的增加或减少自动更新集合
    // 删除时 集合会坍塌
    //     0        1        2        3
    // [checkOne,checkOne,checkOne,checkOne]

    deleteAll.onclick = function(){
        // 遍历所有的单选  => 找到所有选中状态的单选框  删除该行数据
        for(var i=0;i<checkOneList.length;i++){
            var checkOne = checkOneList[i];
            if(checkOne.checked){
                var tr = parent(parent(checkOne));
                console.log(tr);
                tr.remove();
                i--;
            }
        }
    }



    function parent(ele){
        return ele.parentElement || ele.parentNode;
    }
    function prev(ele){
        return ele.previousElementSibling || ele.previousSibling;
    }
    function next(ele){
        return ele.nextElementSibling || ele.nextSibling;
    }







</script>
</html>